<!-- 积分活动模板 -->
<template>
  <view class="ranking uno-w-[100%] uno-bg-white uno-flex uno-p2 uno-overflow-hidden " @click="tagHandler">
    <view>
      <up-image
class="cateImage" :show-loading="true" :src="modelValue.picUrl" width="250rpx"
                height="250rpx"/>
    </view>
    <view class="middle uno-ml2 uno-relative">
      <view>
        <up-text :text="modelValue.introduction" bold/>
      </view>
      <view class="uno-flex uno-flex-justify-between uno-mt1  ">
        <view style="display:flex">
          <up-image v-for="(item) in heatLength" :show-loading="true" :src="'https://www.zhangfkj.cn/zfkj/14_7e812270-2720-45ec-8650-3ac0522cd92bfengqiang_click@2x.94094e8d.png'" width="20px" height="20px"/>
        </view>
        <view class="uno-color-red" color="#ff1d3c!important" style="font-size: 24rpx">
          热度{{ heat }}
        </view>
      </view>

      <view class="uno-flex uno-mt1 uno-mb1">
        <up-tag
:text="item" plain size="mini"
                v-bind="tagStyle(index)"
                v-for="(item,index) in tagList"
                :key="index"
                class="uno-mr1"
        />
      </view>
      <view class="bottom uno-mt1 ">
        <text class="first" color="#888!important" style="font-size: 21rpx">原价：￥{{ fen2yuan(modelValue.marketPrice || '') }}</text>
      </view>
      <view class="priceBox uno-mt1 ">
        <text class="second">{{ modelValue.points || '' }}积分</text>
<!--        <text class="first">+{{ fen2yuan( modelValue.price || '') }}元</text>-->
      </view>

      <view class="uno-absolute uno-p-1 uno-border-rd uno-bg-red uno-color-white uno-flex uno-justify-center uno-items-center" style="bottom: 0;right: 0;z-index: 2;background-color: #ff1d3c">
        去兑换>
      </view>
      <!--      <up-text :block="false" :text="modelValue.price||''"></up-text>+ <up-text :block="false" :text="modelValue.useCredits||''"></up-text>-->
    </view>
  </view>
</template>
<script setup>
  import sheep from '@/sheep';
  import { computed, reactive } from 'vue';
  import { fen2yuan } from '@/sheep/hooks/useGoods';

  const props = defineProps({
    modelValue: {
      type: Object,
      default() {
      },
    },
    show: {
      type: Boolean,
      default: false,
    },
    index: {
      type: Number,
      default: 0,
    },
  });
  const { index } = props;
  const emit = defineEmits(['click']);

  function tagHandler() {
    emit('click', props.modelValue);
  }

  const tagTemp = [
    {
      bgColor: 'rgb(0, 0, 0)',
      color: 'rgb(255, 232, 178)',
      borderColor: 'rgb(0, 0, 0)',
    },
    {
      bgColor: 'red',
      color: 'white',
      borderColor: 'red',
    },
    {

      bgColor: '#1daa8e',
      color: 'white',
      borderColor: '#1daa8e',
    },
  ];
  const tagStyle = (index) => {
    const zindex = index % tagTemp.length;
    return tagTemp[zindex];
  };
  const heatLength = computed(() => {
    const num = (index + 1) / 10;
    const length = num < 4 ? 7 - num : 0;
    return Array.from({ length: length }, (_, index) => index + 1);
  });
  const heat = computed(() => {
    return `${props.modelValue.heat ? (props.modelValue.heat / 10000).toFixed(1) : '10'}万+`;
  });
  const tagList = computed(() => {
    const tag = props.modelValue.productLabel?.split(',');
    return tag;
  });
</script>
<style lang="scss" scoped>
  .ranking {
    box-sizing: border-box;
    border-radius: 20rpx;
    width: 100%;
    background: white;
    padding: 20rpx;

    .middle {
      display: flex;
      justify-content: flex-start;
      flex-direction: column;
      flex: 1 1 auto;

      .priceBox {
        color: #f80519;

        .second {
          font-size: 35rpx;
        }
      }

      .bottom {
        display: flex;
        justify-content: space-between;

        .first {
          text-decoration: line-through;
          font-size: 25rpx;
        }

        .second {
          color: #f80519;
          font-size: 20rpx;
        }
      }
    }

    .cateImage {
      :deep(.u-image) {
        .u-image__image {
          border-radius: 20rpx !important;
        }
      }
    }
  }
</style>
